<template>
    <div class="mainer">
        <div class="login">
            <span class="iconfont tohometo icon-x" @click="$router.push('/recommend')"></span>
            <h1>
                <!-- <img src="https://static1-music.taihe.com/client/img/99e28d0.png" alt=""> -->
                <span class="iconfont icon-logo"></span>
            <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F86%2F37%2F75%2F09ad7283_E863775_44fb7cc9.png&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641960902&t=a654259654579333ad54dec2a884704a" alt=""> -->
            </h1>
            <div class="from">
                <div class="item inpu">
                    <span class="iconfont "></span>
                    <input type="text" v-model="phone">
                </div>
                <div class="item inpu">
                    <span class="iconfont "></span>
                    <input type="password" v-model="password">
                </div>
                <div class="item inpu">
                    <!-- 验证码 -->
                    <span class="iconfont "></span>
                    <input type="text"  v-model="code">
                    <button class="getCode" @click="getCode">发送</button>
                </div>
                <div class="item ">
                    <div class="subimt" @click="subimt">提交</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

// import { getCaptchaSent,getCaptchaVerify,getLoginCellphone } from "../../api/login"
import { getCaptchaSent,getLoginCellphone,getCaptcwer } from "../../api/login"
import { Toast } from 'vant';
// import { getPlaylist } from '../../api/rank';
export default {
    data(){
        return{
            phone:"",
            password:"",
            code:"",
            uid:null,

        }
    },
    methods:{
        getCode(){
            //验证手机号码
            let reg =/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.phone)){
                Toast("请输入正确手机号码");
                return;
            }
            //请求验证码
            getCaptchaSent({"phone":this.phone}).then(data=>{
                if(data.data){
                    Toast("验证码发送成功");
                }else{
                    Toast("验证码发送失败");
                }
            })
        },
        subimt(){
            // let regCode = /^[0-9]{4}$/;
            // //验证验证码
            // if(!regCode.test(this.code)){
            //     Toast("请输入正确验证码");
            //     console.log(this.code)
            //     return;
            // }
            //验证手机号码
            let reg =/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.phone)){
                Toast("请填写正确信息");
                console.log(this.phone)
                return;
            }
            //验证密码
            let regPassword = /^[a-zA-Z]\w{5,17}$/;
            if(!regPassword.test(this.password)){
                console.log(this.password)
                Toast("请填写正确信息");
                return;
            }
            // getCaptchaVerify({"phone":this.phone,"captcha":this.code}).then(data=>{
            //     if(data.data){
                     //验证手机登入密码
                    getLoginCellphone({
                            phone:this.phone,
                            password: this.password
                        }).then(info=>{
                            // console.log(info);
                            Toast("登入成功");
                            window.localStorage.setItem("login",info.cookie);
                            window.localStorage.setItem("token",info.token);
                            window.localStorage.setItem("uid",info.account.id);
                            this.uid=info.account.id
                            getCaptcwer().then(data=>{
                                console.log("用户账号信息",data)
                                // @getnineuid="getnineuid"
                                this.uid=data.profile.userId
                                //  console.log("用户账号信息",this.uid)
                                this.$emit("getnineuid",this.uid)
                            })
                            // 跳回个人中心
                            this.$router.push("/recommend");
                            // this.$router.push({ name:"recommend", params:{obj:this.uid}})
                        })
                // }
            // }).catch(()=>{
            //     Toast("请填写正确信息");
            // })
        },
        
    },
    watch:{
        uid(){
            if(this.uid){
                this.$emit("getnineuid",this.uid)
            }
        }
    }
}
</script>

<style lang="less">
.main{
    height: 100%;
    
}
.login{
  
    // background-color: #d4473c;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 1003;
    // background-color: rgb(129, 9, 9);
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091207%2Fit1yk5xyb44it1yk5xyb44.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642066670&t=0e5cde7b401a8e838f6c915a3ea80ef1);
    // background-size: 100%;
    background-size: 100% 100% ;
    background-repeat: no-repeat;
    position: absolute;
    .tohometo{
        position: absolute;
        top: 10px;
        left: 10px;
        text-align:center;
        font-size: 12px;
        padding: 2px;
        border-radius: 50%;
        border:1px solid #fff;
    }
}
h1{
    font-size: 48px;
    text-align: center;
    margin-top: 100px;
    height: 180px;
    padding: 20px 20px 20px 20px;
    box-sizing: border-box;
    .iconfont{
        font-size: 35px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
    }
    // background-image:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F86%2F37%2F75%2F09ad7283_E863775_44fb7cc9.png&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641960902&t=a654259654579333ad54dec2a884704a);
    img{
        width: 100%;
        height: 100px;
        margin: auto;
    }
}

.from{

    .item{

        width: 76%;
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        background-color: #5d5d5d;
       
        &.inpu{
            opacity: 0.7;
        }
        border-radius: 30px;
        margin-bottom: 12px;
        input{
            background-color: transparent;
            border: 0px;
            outline: none;
            text-indent: 0.5em;
            font-size: 14px;
            color:#fff;
            // background-color:#fff;
        }
        span{
            font-size: 20px;
            margin-left: 10px;
            display: inline-block;
            vertical-align: middle;
        }
        .getCode{
            border: 1px solid #fff;
            height: 20px;
            line-height: 20px;
            width: 50px;
            border-radius: 20px;
            font-size: 12px;
            color: #808080;
            float: right;
            margin: 5px;
        }
        .subimt{
            font-size: 15px;
            background-color: #d44439;
            text-align: center;
            color: #fff;
            border-radius: 15px;
            opacity: 1;
            
        }

    }
}
</style>